<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.global.js"></script>
  </head>

  <body>
    <div id="app">
      <custom-form @submit="onSubmitMsgGot"></custom-form>
    </div>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            count: 0,
          };
        },
        methods: {
          onSubmitMsgGot(payload) {
            console.log("onSubmitMsgGot", payload);
          },
        },
      });

      app.component("custom-form", {
        emits: {
          // 没有验证
          click: null,

          // 验证 submit 事件
          // 入参为事件携带的数据（载荷）
          submit: ({ email, password }) => {
            if (email && password) {
              return true;
            } else {
              console.warn("Invalid submit event payload!");
              return false;
            }
          },
        },

        methods: {
          submitForm(payload) {
            console.log("submitForm");
            this.$emit("submit", payload);
          },
        },

        template: `
          <button @click="submitForm({name:'乌拉'})">click me</button>
          <button @click="submitForm({email:'123@qq.com',password:'123456'})">click me</button>
          `,
      });

      const vm = app.mount("#app");
    </script>
  </body>
</html>
